<template>
  <div class="loginBox">
    <div class="innerBox">
      <div class="tip">
        <span>Welcome back</span>
        <span>nice to meet you</span>
      </div>
      <div class="form">
        <input v-model="userName" type="text" placeholder="userName" />
        <input v-model="passWord" type="password" placeholder="passWord" />
        <button @click="login" class="iconfont icon-jinru">Login</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "login",
  data(){
	  return{
		  userName:'',
		  passWord:'',
		  isRegister:false,
	  }
  },
  methods:{
	 async login(){
		await this.$api.userApi.login(this.userName,this.passWord).then((res)=>{
			console.log(res)
			if(res.data.status ==200){
				localStorage.removeItem('token')
				localStorage.setItem('token',res.data.token)
				this.$store.commit('user/setToken',localStorage.getItem('token'))
				this.$store.commit('user/setUserInfo',JSON.stringify(res.data.userinfo))
				alert("登录成功")
				this.$router.push({
					path:'/home'
				})
				window.location.reload()
			}else{
				alert("账号或密码错误")
			}
			
		})
	  }
  }
};
</script>

<style lang="less" scoped>
.loginBox {
	padding-top: 120px;
  background-color: #333;
  height: 100vh;
  overflow: hidden;
  .innerBox {
    width: 50%;
    height: 50%;
    margin: 0 auto;
    margin-top: 40px;
    display: flex;
    box-shadow: 1px 1px 3px 3px black;
    div {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 50%;
      height: 100%;
    }
    .tip {
      color: white;
      font-size: 30px;
    }
    .form {
      input {
        width: 85%;
        height: 40px;
        margin-top: 20px;
      }
      button {
        width: 85%;
        height: 40px;
        margin-top: 20px;
        background: linear-gradient(to right, #31751d, #a1c25a);
      }
    }
  }
}
</style>